<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }

        .web{
            width: 1000px;
            height: 1500px;
            background-color: #CCCCCC;
            border: #666666 1px solid;
            margin: 0 auto;

        }
        /*对联广告样式*/
        #ad1,#ad2{
            position: fixed;
            top:50px;
            width:100px;
            height: 200px;
            background-image: url(ad1.jpg);

        }
        #ad1{left: 0;}/*靠左*/
        #ad2{right:0 ;}/*靠右*/
        /*弹窗广告样式*/
        #ad3{
            position: fixed;
            bottom:0px;/*右下*/
            right:0px;
            height:250px ;
            width:300px ;
            background-image: url(ad2.jpg);
        }
        /*关闭按钮图片样式*/
        #close,#close1{

            width: 50px;
            height:15px ;
            object-fit: cover;
            position: absolute;
            bottom:0;
            right:0;
            background-image: url(close.png);
            background-repeat:no-repeat;
            background-size:cover;
            background-position:center center;
        }

        #close3{

            width: 50px;
            height:15px ;
            object-fit: cover;
            position: absolute;
            top:0;
            right:0;
            background-image: url(close.png);
            background-repeat:no-repeat;
            background-size:cover;
            background-position:center center;
        }
    </style>
</head>
<body>
<div id=ad1>
    <div id="close" ></div>
</div>
<div class="web"></div>
<div id=ad2>
    <div id="close1" ></div>
</div>
<div id="ad3" style="display:none;"><div id="close3"></div></div>
</body>
<script type="text/javascript">
    var close=document.querySelector("#close");
    var close1=document.querySelector("#close1");
    var close3=document.querySelector("#close3");
    var ad1=document.getElementById('ad1');
    var ad2=document.getElementById('ad2');
    //        关闭左边
    close.onclick=function(){
        ad1.style.display="none";
        ad2.style.display="none";

    }
    //        关闭右边
    close1.onclick=function(){
        ad1.style.display="none";
        ad2.style.display="none";


    }
    //        关闭弹窗广告
    close3.onclick=function(){
        var ad3=document.getElementById('ad3');
        ad3.style.display="none";


    }
    //1.5s弹出弹窗广告
    window.onload=function(){//页面加载事件
        var ad3=setTimeout(function(){
            var ad3=document.getElementById('ad3');
            ad3.style.display="inline"
        },1500)
    }
</script>
</html>
